<template>
	<view class="address-container">
		<view class="form-item">
			<view class="form-label">姓名</view>
			<input class="input" type="text" v-model="addressData.realname" @blur="handleRealNameChange" placeholder="请填写姓名" placeholder-class="placeholder" />
		</view>
		<view class="form-item">
			<view class="form-label">电话</view>
			<input class="input" type="number" v-model="addressData.mobile" @blur="handleMobileChange" placeholder="请填写手机号" placeholder-class="placeholder" />
		</view>
		<view class="form-item">
			<view class="form-label">地区</view>
			<pick-regions :addressData="addressData" @getRegions="handleGetRegions"></pick-regions>
		</view>
		<view class="form-item">
			<view class="form-label">详细地址</view>
			<input class="input" type="text" v-model="addressData.address_details" @blur="bindAddressDetailsChange" placeholder="街道门牌信息" placeholder-class="placeholder" />
		</view>
		<view class="footer">
			<text class="date-btn" @click="deleteAddress">删除</text>
			<text class="save-btn" @click="submit">保存</text>
		</view>
	</view>
</template>

<script>
import pickRegions from '../components/pick-regions/pick-regions.vue';
export default {
	components: {
		pickRegions
	},
	data() {
		return {
			addressData: {
				realname: '',
				mobile: '',
				address_details: '',
				address_name: '请选择地址',
				address: '',
				is_default: false,
				province_id: '',
				city_id: '',
				area_id: ''
			},
			value: '',
			type: 'textarea',
			border: true,
			height: 100,
			autoHeight: true,
			form: {
				name: '',
				phone: '',
				region: '',
				address: ''
			}
		};
	},
	methods: {
		// 获取选择的地区
		handleGetRegions(e) {
			this.addressData.province_id = e.province_id;
			this.addressData.city_id = e.city_id;
			this.addressData.area_id = e.area_id;
			this.addressData.province_name = e.province_name;
			this.addressData.city_name = e.city_name;
			this.addressData.area_name = e.area_name;
		},
		handleRealNameChange(e) {
			this.addressData.realname = e.detail.value;
		},
		bindAddressDetailsChange(e) {
			this.addressData.address_details = e.detail.value;
		},
		handleMobileChange(e) {
			this.addressData.mobile = e.detail.value;
		},

		deleteAddress() {
			if(this.flag !== 'edit') {
				return;
			}
			this.$request
				.post({
					url: 'address/delete/' + this.id,
					data: {
					}
				}).then(() => {
					uni.showToast({
						icon: 'none',
						title: '删除成功'
					});
					uni.navigateTo({
						url: `/pageA/pay/pay?id=${this.ids}`
					});
				});
		},
		submit() {
			const data = this.addressData;
			if (!data.realname) {
				uni.showToast({
					title: '请填写姓名',
					icon: 'none'
				});
				return;
			}
			if (!/^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(data.mobile)) {
				uni.showToast({
					title: '请输入正确的手机号码',
					icon: 'none'
				});
				return;
			}
			if (this.flag === 'edit') {
				this.handleAddressUpdate(data);
			} else {
				this.handleAddressCreate(data);
			}
		},

		handleAddressUpdate(data) {
			this.$request
				.post({
					url: 'address/update',
					data: {
						id: data.id,
						name: data.realname,
						phone: data.mobile,
						address_detail: data.address_details,
						is_default: 1,
						province_id: data.province_id,
						city_id: data.city_id,
						area_id: data.area_id,
						province_name: data.province_name,
						city_name: data.city_name,
						area_name: data.area_name
					}
				})
				.then(() => {
					uni.showToast({
						icon: 'none',
						title: '收货地址修改成功'
					});
					uni.navigateTo({
						url: `/pageA/pay/pay?id=${this.ids}`
					});
				});
		},
		handleAddressCreate(data) {
			this.$request
				.post({
					url: 'address/create',
					data: {
						name: data.realname,
						phone: data.mobile,
						address_detail: data.address_details,
						is_default: 1,
						province_id: data.province_id,
						city_id: data.city_id,
						area_id: data.area_id,
						province_name: data.province_name,
						city_name: data.city_name,
						area_name: data.area_name
					}
				})
				.then(() => {
					uni.showToast({
						icon: 'none',
						title: '收货地址添加成功'
					});
					uni.navigateTo({
						url: `/pageA/pay/pay?id=${this.ids}`
					});
				});
		},

		getAddressDetail(id) {
			this.$request
				.get({
					url: 'address/detail',
					data: {
						id
					}
				})
				.then(res => {
					if (res.status === 1) {
						const response = res.data;
						this.addressData = {
							id: response._id,
							realname: response.name,
							mobile: response.phone,
							address_details: response.address_detail,
							address_name: '请选择地址',
							address: '',
							is_default: response.is_default === 0 ? false : true,
							province_id: response.province_id,
							city_id: response.city_id,
							area_id: response.area_id
						};
					}
				});
		}
	},
	onLoad(options) {
		const { id, flag, ids } = options;
		this.flag = flag;
		this.ids = ids;
		this.id = id;
		let title = '';
		if (flag === 'add') {
			title = '新增收货地址';
		} else if (flag === 'edit') {
			title = '编辑收货地址';
			this.getAddressDetail(id);
		}
		uni.setNavigationBarTitle({
			title
		});
	}
};
</script>

<style scoped lang="less">
.address-container {
	background-color: #fff;
	padding: 0 32upx;

	.form-item {
		display: flex;
		align-items: center;
		height: 104upx;
		border-bottom: 1upx solid #dfe1ec;

		&:last-of-type {
			border: none;
		}

		.form-label {
			width: 120upx;
			margin-right: 52upx;
			color: #474a58;
			font-size: 30upx;
		}

		.form-value {
		}
	}

	.footer {
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 32upx;
		padding: 0 32upx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		text {
			width: 332upx;
			height: 80upx;
			border-radius: 4upx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 34upx;
		}

		.date-btn {
			background: rgba(255, 255, 255, 1);
			border: 2upx solid rgba(223, 225, 236, 1);
			color: #474a58;
		}

		.save-btn {
			color: #fff;
			background: linear-gradient(135deg, rgba(252, 79, 145, 1) 0%, rgba(253, 108, 230, 1) 100%);
		}
	}
}
</style>
